<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!--
    v-model指令，负责监听用户的输入事件，并可以对输入的数据做一些处理，但是它有限制,只能在input、select、textarea三个元素上使用，其他会报错
    v-model指令放input、select、textarea三个元素上，会创建双向绑定，就是input、select、textarea上的值改变了会把v-model的data改变，反之v-model的data改变会改变input、select、textarea上的值
    v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
  1. v-bind绑定一个value属性
  2. v-on指令给当前元素绑定input事件
      -->
    <!-- 最简单的使用-->
    <input v-model="message" />
    <!--用一个语法糖也能实现-->
    <input v-bind:value="message" v-on:input="message = $event.target.value">
    <textarea v-model="message" ></textarea>
    <h1>{{message}}</h1>

    <select v-model="selectVal">
        <option value="AAAAA">AAAAA</option>
        <option value="BBBBB">BBBBB</option>
        <option value="CCCCC">CCCCC</option>
        <option value="DDDDD">DDDDD</option>
    </select>
    <h1>{{selectVal}}</h1>
</div>
</body>
<script src="../../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好',
            selectVal: 'DDDDD',
        }
    });
</script>
</html>
